<template>
  <div>
    <tableComponents :pagination="{currentPage,pageSize,total:materialList.all_num}" @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange" @sendUserSearch="getSearch" :searchData="userSearchData" :isHaveExport="false" @toAdd="add_material">
      <template v-slot:table>
        <el-table v-loading="loading" element-loading-text="拼命加载中" ref="multipleTable" :data="materialList.data" stripe
            header-row-class-name="head_color" tooltip-effect="dark" style="width: 99.8%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width></el-table-column>

          <el-table-column label="排序" sortable :sort-method="sorta" align="center" width="80">
            <template slot-scope="scope">
              <el-input @change="sortNew(scope.$index,scope.row)" v-model.number="scope.row.sort" autocomplete="off" size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="内容" min-width="260">
            <template slot-scope="scope">
              <div v-if="scope.row.types == 1">
                <p>{{ scope.row.content }}</p>
              </div>
              <div v-else-if="scope.row.types == 2">
                <p>{{ scope.row.content }}</p>
              </div>
              <div v-else-if="scope.row.types == 3">
                <img class="sucai" :src="$fnc.getImgUrl(scope.row.content)" alt />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="添加时间" min-width="200">
            <template slot-scope="scope">{{ scope.row.created_time | getTimeFormat }}</template>
          </el-table-column>
          <el-table-column label="修改时间" min-width="200">
            <template slot-scope="scope">{{ scope.row.update_time | getTimeFormat }}</template>
          </el-table-column>
          <el-table-column label="类型" min-width="100">
            <template slot-scope="scope">
              <p v-if="scope.row.types == 1">文本</p>
              <p v-else-if="scope.row.types == 2">链接</p>
              <p v-else-if="scope.row.types == 3">图片</p>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="150">
            <template slot-scope="scope">
              <el-button :loading="$store.state.isLoading" size="mini" type="primary" @click="update_material(scope.row.id )">编辑</el-button>
              <el-button :loading="$store.state.isLoading" size="mini" type="danger" @click="delete_material( scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template v-slot:footerLeft>
        <a class="aBtn aBtn_1 aBtn_lan2" @click="deleteAll_material">删除</a>
      </template>
    </tableComponents>
    <el-dialog :close-on-click-modal="false" title="素材管理" v-loading="dioLoading" class="tl size_13" width="800px" :visible.sync="dialogFormVisible">
      <el-form :model="add_form" :rules="formYZ" ref="form" label-width="120px">
        <el-form-item label="类型">
          <el-col :span="12">
            <el-select v-model="add_form.types" size="small" :clearable="true" style="width: 100%">
              <el-option v-for="item in type_option" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="文本" v-show="add_form.types == 1">
          <el-col :span="12">
            <el-input type="textarea" :rows="6" v-model="add_form.content" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="链接" v-show="add_form.types == 2">
          <el-col :span="12">
            <el-input v-model="add_form.content" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="图片" prop="piclink" v-show="add_form.types == 3">
          <el-col :span="12">
            <el-input v-model="add_form.content" autocomplete="off" disabled class="mar_bottom_5"></el-input>
            <uploadpic :piclink="add_form.content" :width="150" :height="150" :real_width="150" :real_height="150" :is_more="false"
                @send_pic="onSuccess"></uploadpic>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button :loading="$store.state.isLoading" v-show="!edit_flag" type="primary" @click="submitForm(add_form)">确 定</el-button>
          <el-button :loading="$store.state.isLoading" v-show="edit_flag" type="primary" @click="saveForm(add_form)">编 辑</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import HeadNav from "@/components/HeadNav.vue";
import LeftNav from "@/components/LeftNav.vue";
import uploadpic from "@/components/page/pic/up_pic";
import { immaterialSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
export default {
  name: "im_material",
  data () {
    return {
      userSearchData: immaterialSearchData,
      edit_flag: false,
      //------------------添加
      fileList: [],
      showImg: false,
      formLabelWidth: "100px",
      formYZ: {
        types: [{ required: true, message: "选项卡不能为空", trigger: "blur" }]
        //
        // links: [{ required: true, message: "链接不能为空", trigger: "blur" }],
        // content: [{ required: true, message: "内容不能为空", trigger: "blur" }]
      },
      multipleSelection: [],
      dialogFormVisible: false,
      dioLoading: false,
      add_form: {
        types: "1",
        content: ""
      },
      //------------------添加
      material_search: {
        title: "",
        types: ""
      },
      materialList: [],
      loading: false,
      pageSize: 10,
      currentPage: 1,
      im_searcj: false,
      type_option: [
        {
          value: "1",
          label: "文本"
        },
        {
          value: "2",
          label: "链接"
        },
        {
          value: "3",
          label: "图片"
        }
      ],
      index: ""
    };
  },
  components: {
    HeadNav,
    LeftNav,
    uploadpic
  },

  methods: {
    sorta (a, b) {
      return b - a;
    },
    sortNew (index, row) {
      var params = {};
      params.id = row.id;
      params.sort = row.sort;
      this.$api.getim.material_sort(params).then(res => {
        if (res.data.code == 200) {
          this.get_material();
          // this.$fnc.alertSuccess("修改成功");
        }
      });
    },
    deleteAll_material () {
      //批量删除
      var str = "";
      if (this.multipleSelection.length <= 0) {
        this.$message.error("未选择批量删除");
      } else {
        for (var i in this.multipleSelection) {
          str += this.multipleSelection[i].id + "@";
        }
        str = str.slice(0, -1);
        this.$swal({
          title: "您确定要删除这些信息吗",
          text: "删除后将无法恢复，请谨慎操作！",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "是的，我要删除",
          cancelButtonText: "容我三思"
        }).then(willDelete => {
          if (willDelete.value) {
            this.$api.getim.material_delall({ del_id: str }).then(res => {
              if (res.data.code == 200) {
                this.$swal("删除成功！", "您已经删除了这些信息。", "success");
                this.get_material();
              } else {
                this.$swal("删除失败！", "出错啦！", "success");
                this.get_material();
              }
            });
          }
        });
      }
    },

    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    delete_material (id) {
      //删除
      this.$api.getim.material_del({ id: id }).then(res => {
        if (res.data.code == 200) {
          this.$swal("删除成功！", "您已经删除了这条信息。", "success");
          this.get_material();
        } else {
          this.$swal("删除失败！", "出错啦！", "success");
          this.get_material();
        }
      });
    },
    saveForm (obj) {
      //保存修改的
      this.$api.getim.material_save(obj).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess("修改成功");
          this.get_material();
        } else {
          this.$fnc.alertError("修改失败");
          this.get_material();
        }
      });
      this.dialogFormVisible = false;
      this.showImg = false;
    },
    update_material (id) {
      //修改页面
      // this.showImg = true;
      this.edit_flag = true;
      this.dialogFormVisible = true;
      this.$api.getim.material_edit({ id: id }).then(res => {
        this.add_form.types = res.data.result.types;
        this.add_form.content = res.data.result.content;
        this.add_form.id = res.data.result.id;
      });
    },
    submitForm (obj) {
      // 提交添加按钮
      this.$api.getim.material_add(obj).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess("添加成功");
          this.get_material();
        } else {
          this.$fnc.alertError("添加失败");
          this.get_material();
        }
      });
      this.dialogFormVisible = false;
      this.showImg = false;
    },
    onSuccess (pic) {
      //图片上传
      this.add_form.content = pic;
      this.showImg = true;
    },
    add_material () {
      //添加im素材
      this.add_form.types = "1";
      this.add_form.content = "";
      this.edit_flag = false;
      this.dialogFormVisible = true;
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      //每页下拉显示数据
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      //点击第几页
      this.loading = true;
      if (this.or_search == false) {
        this.currentPage = currentPage;
        this.get_material(currentPage);
        this.loading = false;
      } else if (this.or_search == true) {
        //搜索的
        this.currentPage = currentPage;
        this.material_search.page = currentPage;
        this.get_material(currentPage);
        this.loading = false;
      }
    },
    get_material (page) {
      this.or_search = false;
      this.loading = true;
      this.$api.getim.material_find({ page: page }).then(res => {
        if (res.data.code == 200) {
          this.materialList = res.data.result;
        }
      });
      this.loading = false;
    },
    delSearch () {
      this.$api.getim.material_find({}).then(res => {
        if (res.data.code == 200) {
          this.materialList = res.data.result;
        }
        this.loading = false;
      });
    },
    getSearch (obj) {
      obj.page = 1;
      this.or_search = true;
      this.loading = true;
      this.$api.getim.material_find(obj).then(res => {
        if (res.data.code == 200) {
          this.materialList = res.data.result;
        }
        this.loading = false;
      });
    },
    getLeftMenu (index) {
      this.index = index;
    }
  },
  created () {
    this.get_material();
  }
};
</script>

<style scoped>
</style>
